<html>
    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>

        #main{
            
        }
        #div1{

        }
        #div2{
            display:flex;
        }
        #bottom {
            
        }
        #left{
            display:flex;
            flex:1;
        }
        #right{
            flex:1;
        }
        #leftBox{
            width:10%;
            background-color: cadetblue;
        }

        .lboxitem{
            text-align: center;
            color:#666666;
            
        }
        #binBox{
            width:50%;
            display: flex;
            flex-wrap:wrap;
            flex:16;

        }

        .bitem{
            width:6.25%;
            text-align: center;
            cursor:pointer;
        }

        .se {
            background-color:darkslategray;
            color:white;
        }

    </style>
    
    </head>
    <body>
        <div id="main">
            <div id="div1">

                <div id="nav"> 当前路径 : <a href="">[[nav]]</a> </div>
                <div id="next"> 下个路径 : <a :href="nexturl" >[[nextNav]]</a> </div>
            </div>   
            <div id="div2">
                <div id="left">
                    <div id="leftBox">
                        <div v-for="i in indexArr" class="lboxitem">[[i]]</div>
                    </div>
                    <div id="binBox">
    
    
                        <template v-for="(item,index) in rdata.items">
                            <div class="bitem" :class="'i' + index" @click.stop="iclick('' + index)" v-for="b in item.body">[[b.charCodeAt().toString(16)]]</div>
                        </template>
        
                    </div>
                </div>
    
                <div id="right">
                    <pre>
                        [[des]]
                    </pre>
                </div>
            </div>

            
             
        </div>

        
    </body>

    <script type="text/javascript">

        //let apidocs = JSON.parse("{!! $apidocs !!}");
        let rdata = {{.Rdata}};
        let nav = "{{.Nav}}";



        let indexN = rdata.len/16

        let indexArr = []; 
        for (let i =0; i< indexN; i++) {
            indexArr.push("0x" + (i*16).toString(16))
        }


        
        let nexturl = "/?p=" + nav + "@" + rdata.next;
        var d = {
            "rdata" : rdata,
            "indexArr" : indexArr,
            "des" : "",
            "nav" : nav,
            "nexturl" : nexturl,
            "nextNav" : rdata.next
        };
        
        var app = new Vue({
            el: "#main",
            delimiters: ['[[',']]'],
            data : d,
            methods: {
                iclick: function(i) {
                    
                    //删除之前的样式
                    document.querySelectorAll(".se").forEach(function(n) {
                        n.classList.remove("se");
                    });

                    //添加新的
                    document.querySelectorAll(".i" + i).forEach(n => {
                        n.classList.add("se");
                    });

                    this.des = this.rdata.items[parseInt(i)].des
                    
                }
            }
        });


        

    </script>
</html>